<template>
	<div class="table-footer">

		<div>
			<div id="search-btn" class="btn-icon fa fa-search" title="数据搜索" @click="toggleSearchPanel"></div>
		</div>
		<div>
			<div id="columns-check" class="btn-icon fa fa-list-alt" title="表头显示">

			</div>
		</div>
		<div class="page-count">
			<span>显示条目：</span>
			<select style="width: 50px">
				<option>10</option>
				<option>20</option>
				<option>50</option>
			</select>

		</div>
		<div class="page-info">
			<span>当前第 1 到 14 条， 共 14 条&nbsp;&nbsp;&nbsp;&nbsp;转到 </span>
			<input type="text" style="width:30px">
			<span> 页</span>
			<a>确定</a>

		</div>


	</div>
</template>

<script>
	import TableBus from '@/components/table/TableBus.vue';
	export default {
		data() {
			return {

			};
		},
		methods: {
			toggleSearchPanel: function() {
				TableBus.$emit('toggleSearchPanel');
			}
		}
	}
</script>

<style>
	.btn-icon {
		width: 40px;
		height: 40px;
		background-color: #ddd;
		color: #848383;
		margin-left: 10px;
		border: 1px solid #ccc;
		text-align: center;
		line-height: 38px;
		cursor: pointer;
		border-radius: 50%;
		transition: background-color .2s linear;
	}

	.btn-icon:hover {
		background-color: #676767;
		color: #fff;
	}

	.table-footer {
		height: 60px;
		line-height: 60px;
		border-top: 2px solid #eaeaea;
		background: #fff;
	}

	.table-footer>div {
		float: left;
	}

	.page-count {
		margin-left: 10px;
		color: #a4a4b4;
	}

	.page-info {
		color: #a4a4b4;
		float: right !important;
		margin-right: 25px;
		font-size: 14px;
	}
</style>
